<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<!--//1.挂载点：div标签 el属性后的id dom节点-->

<!--<div id="root">{{msg}}</div>-->
<div id="root">
    <h1 v-on:click="handleClick">{{msg}}</h1> <!--//2.模板-->
    <!--v-on可以简写为@就可以了，上面的可为 <h1 v-on:click="handleClick">{{msg}}</h1>-->

    <!--<h2>{{number}}</h2>-->
    <!--<h2 v-text="number"></h2> // v-text不解析标签，进行了转译-->
    <!--<h2 v-html="number"></h2> //v-html可以解析标签-->
    <!--或者将h1标签写到下面的template中-->
</div>

</body>
<script>
    new Vue({
        el:"#root",
        // template:"<h1>hello {{msg}}</h1>",
        data:{
            msg:"hello"
            // number:"123",
        },
        methods:{
            // 点击事件
            handleClick:function () {
                // alert(123)
                this.msg="word"//将hollo变成word
            }
        }
    })
</script>
</html>